<script setup>
defineOptions({
  name: 'YBreadcrumb',
});
import { useRoute } from 'vue-router';
import { useThemeStore } from '@/stores';

const route = useRoute();
const themeStore = useThemeStore();

const breadcrumbList = computed(() => {
  return route.matched
    .map((item) => {
      return item.path === '/'
        ? null
        : {
            name: item.meta.title,
            path: item.path,
          };
    })
    .filter((item) => item !== null);
});
const handleClick = () => {
  themeStore.updateLayoutSetting({
    collapsed: !themeStore.layoutSetting.collapsed,
  });
};
</script>
<template>
  <div class="flex items-center">
    <a-button type="text" class="mr-2" @click="handleClick">
      <template #icon>
        <y-icon
          icon="fa-solid fa-bars"
          :class="{ 'rotate-90': themeStore.layoutSetting.collapsed }"
        ></y-icon>
      </template>
    </a-button>
    <a-breadcrumb>
      <a-breadcrumb-item v-for="item in breadcrumbList" :key="item.path">{{
        item.name
      }}</a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>
